<!--
 * @Author: 张鹏
 * @Date: 2025-07-04 09:53:55
 * @LastEditors: zhangp zhangp@163.com
 * @LastEditTime: 2025-07-07 15:05:00
 * @FilePath: \mapbox\src\views\example\BillboardEntity.vue
 * @Description: 标记点示例
 * 
-->
<template>
    <div class="map-page">
        <div id="map" class="map-container"></div>
        
        <MapToolbar 
            title="标记点工具"
            :show-draw-buttons="true"
            :draw-buttons="drawButtons"
            @remove="removeEntity"
            @removeAll="removeAllEntities"
            @hideAll="hideAllEntities"
            @showAll="showAllEntities"
        />
    </div>
</template>

<script setup>
import { onMounted, reactive, computed } from 'vue'
import Map from '289-map'
import Mock from 'mockjs'
import MapToolbar from '@/components/MapToolbar.vue'
import { Plus } from '@element-plus/icons-vue'

const entities = reactive([])
let map

onMounted(async () => {
    map = new Map('map', {
        scene: {
            center: {
                lng: 116.40,
                lat: 39.90,
                alt: 1000,
                heading: 0,
            },
            zoom: 2
        },
        style: 'https://demotiles.maplibre.org/style.json',
    })

    const graphic = new Map.Graphic.BillboardEntity({
        show: true,
        position: [116.40, 39.90],
        style: {
            image: await import('@/assets/images.jpg'),
            width: 64,
            height: 64,
            label: {
                text: '自定义标记',
                font_size: 16,
                font_weight: 'bold',
                color: 'green',
                pixelOffsetY: 30,
                pixelOffsetX: 0,
            }
        },
        popup: '<div>这是一个自定义标记</div>',
        popupTrigger: 'click',
        popupOptions: {
            closeButton: true,
            maxWidth: '200px',
        },
    })
    graphic.click = () => {
        console.log("Graphic clicked:", graphic)
    }
    entities.push(graphic)
    map.addGraphic(graphic)
})

const drawButtons = computed(() => [
    {
        label: '随机生成',
        type: 'primary',
        icon: Plus,
        onClick: addRandomEntity
    }
])

const addRandomEntity = async () => {
    map.removeAllGraphics()
    entities.length = 0
    
    for (const item of Array.from({ length: 10 })) {
        const graphic = new Map.Graphic.BillboardEntity({
            position: [Mock.Random.float(100, 120, 6, 6), Mock.Random.float(30, 50, 6, 6)],
            style: {
                image: await import('@/assets/images.jpg'),
                width: 64,
                height: 64,
                label: {
                    text: '自定义标记',
                    font_size: 16,
                    font_weight: 'bold',
                    color: 'green',
                    pixelOffsetY: 90,
                    pixelOffsetX: 30,
                }
            },
            popup: '<div>这是一个自定义标记</div>',
            popupTrigger: 'click',
            popupOptions: {
                closeButton: true,
                maxWidth: '200px',
            }
        })
        entities.push(graphic)
        map.addGraphic(graphic)
    }
    
    map.flyTo({
        center: [116.407413, 39.904214],
        zoom: 10,
        pitch: 45,
        bearing: 0,
        duration: 5000
    })
}

const removeEntity = () => {
    for (const item of entities) {
        map.removeGraphic(item)
    }
}

const removeAllEntities = () => {
    entities.length = 0
    map.removeAllGraphics()
}

const hideAllEntities = () => {
    for (const item of entities) {
        item.show = false
    }
}

const showAllEntities = () => {
    for (const item of entities) {
        item.show = true
    }
}
</script>

<style lang="scss" scoped>
.map-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.map-container {
    width: 100%;
    height: 100%;
}

.page-info {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    max-width: 320px;
}

.info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    h3 {
        margin: 0 0 12px 0;
        color: #2c3e50;
        font-size: 16px;
        font-weight: 600;
    }
    
    p {
        margin: 0 0 16px 0;
        color: #7f8c8d;
        font-size: 14px;
        line-height: 1.5;
    }
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5a6c7d;
    
    .feature-icon {
        font-size: 16px;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .page-info {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .info-card {
        padding: 16px;
    }
    
    .info-card h3 {
        font-size: 15px;
    }
    
    .info-card p {
        font-size: 13px;
    }
    
    .feature-item {
        font-size: 12px;
    }
}
</style>